<template>
  <!-- 文本处理容器 -->
  <n-flex vertical>
    <!-- 带处理的文本 -->
    <n-input v-model:value="text1" type="textarea" rows="14" placeholder="待处理的数据" />

    <!-- 处理按钮 -->
    <n-flex align="center">
      <!-- 去除空白行 -->
      <n-button ghost @click="removeEmptyLines"> 去除空白行 </n-button>

      <!-- 分隔符 -->
      <n-divider vertical />

      <!-- 去换行 -->
      <n-button ghost @click="removeLineBreaks"> 去除换行 </n-button>

      <!-- 分隔符 -->
      <n-divider vertical />

      <!-- 替换按钮 -->
      <n-flex align="center">
        <!-- 替换前 -->
        <n-input style="width: 140px" v-model:value="replaceText" placeholder="需要替换的字符" />
        <!-- 替换后 -->
        <n-input style="width: 140px" v-model:value="replaceText2" placeholder="替换后的字符" />
        <!-- 常用替换 -->
        <n-popover trigger="hover" placement="right">
          <!-- 前端展示 -->
          <template #trigger>
            <IMdiProgressQuestion />
          </template>
          <!-- 弹出层标题 -->
          <template #header>
            <n-text strong depth="1"> 常用替换 </n-text>
          </template>
          <!-- 弹出层内容 -->
          <n-flex align="center" justify="space-between">
            <div>制表符：\t</div>
            <n-button @click="copyText('\t')">复制</n-button>
          </n-flex>
          <n-flex align="center" justify="space-between">
            <div>换行符：\n</div>
            <n-button @click="copyText('\n')">复制</n-button>
          </n-flex>
        </n-popover>
        <n-button ghost @click="replaceContent"> 替换 </n-button>
      </n-flex>

      <!-- 分隔符 -->
      <n-divider vertical />

      <!-- 行去重 -->
      <n-button ghost @click="removeDuplicates"> 行去重 </n-button>
    </n-flex>

    <!-- 处理后的文本 -->
    <n-input v-model:value="text2" type="textarea" rows="14" placeholder="处理后的数据" />
  </n-flex>
</template>

<script lang="ts" setup>
const message = useMessage()

/* ******************************通用属性/方法****************************** */
// 复制文本
const copyText = async (text: string) => {
  try {
    // 使用 Clipboard API 异步复制文本到剪贴板
    await navigator.clipboard.writeText(text)
    // 提示用户复制成功
    message.success('文本复制成功')
  } catch (err) {
    message.error('文本复制失败')
  }
}

/* ******************************文本处理属性/方法****************************** */
// 待处理的数据
const text1 = ref('')
// 处理后的数据
const text2 = ref('')
// 替换的字符
const replaceText = ref('')
// 替换后的字符
const replaceText2 = ref('')

// 去除空白行
const removeEmptyLines = () => {
  text2.value = text1.value
    .split('\n')
    .filter((line) => line.trim() !== '')
    .join('\n')
}
// 去除换行
const removeLineBreaks = () => {
  text2.value = text1.value.replace(/\n/g, '')
}
// 替换字符
const replaceContent = () => {
  // 处理特殊字符
  const specialChars = ['\\', '^', '$', '.', '*', '+', '?', '(', ')', '[', ']', '{', '}', '|']
  const replaceTextValue = specialChars.includes(replaceText.value)
    ? '\\' + replaceText.value
    : replaceText.value
  const replaceText2Value = specialChars.includes(replaceText2.value)
    ? '\\' + replaceText2.value
    : replaceText2.value
  text2.value = text1.value.replace(new RegExp(replaceTextValue, 'g'), replaceText2Value)
}
// 去重
const removeDuplicates = () => {
  text2.value = text1.value
    .split('\n')
    .filter((line) => line.trim() !== '')
    .filter((line, index, self) => self.indexOf(line) === index)
    .join('\n')
}
</script>

<style lang="scss" scoped>
:deep(.n-divider--vertical) {
  width: 2px;
  background-color: #555555;
}
</style>
